<template>
  <view class="direct-car-container flex">
    <image class="car-img" :src="carInfo.headImageUrl"></image>
    <view class="product-info-container">
      <view class="product-name">{{carInfo.routeName}}-{{carInfo.name}}</view>
      <view class="bottom-container">
        <view class="product-price">
          {{carInfo.price}}
        </view>
        <view class="reservation-btn"  @click="handleReservationCar(carInfo,queryData)">
          订
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
 
defineProps<{
  carInfo: {
	id:number; 
    name: string; 
	routeId: string; 
	routeName: string; 
    price: number; 
    headImageUrl: string;
  };
  queryData: {};
}>();
	
  const handleReservationCar = (item,type) => { 
	if(type.carType == 1){ 
		uni.navigateTo({
		  url: "/trafficSubPack/pages/directCar/reservationDirectCar?id="+item.id +'&name='+item.routeName +'&routeId='+item.routeId
		})
	} else if(type.carType == 2){ 
		uni.navigateTo({
		  url:'/trafficSubPack/pages/charteredBusDetail/index?id='+item.id +'&name='+item.routeName +'&routeId='+item.routeId
		})
	}
    
  };
</script>

<style lang="scss" scoped>
  .direct-car-container {
    justify-content: space-between;
    align-items: flex-start;
    height: 205.5rpx;
    border-radius: 10.5rpx;
    overflow: hidden;
    margin-bottom: 36rpx;
    background: #ffffff;
    .car-img {
      width: 226rpx;
      height: 100%;
      border-radius: 10.5rpx;
      overflow: hidden;
      background-size: cover;
    }
    .product-info-container {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      height: 100%;
      padding:0 20rpx;
      .product-name {
		  height: 60rpx;
        font-size: 33rpx;
        font-weight: bold;
        color: #181818;
      }
      .bottom-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .product-price {
          font-size: 33rpx;
          color: #AA5414;
          font-weight: bold;
        }
        .product-price:before {
          content: "￥";
          font-size: 25rpx;
          font-weight: normal;
        }
        .product-price:after {
          content: "起";
          font-size: 25rpx;
          font-weight: normal;
        }
        .reservation-btn {
          border-radius: 10.5rpx;
          padding: 15rpx 28rpx;
          font-size: 33rpx;
          font-weight: bold;
          color: #FFFFFF;
          background: #1B9C61;
        }
      }
    }
  }
</style>
